<!-- 历史负荷 -->
<template>
	<view>
		<view class="histit">
			A区-五号楼 I 4-3号箱式变压箱
		</view>
		<view class="page">
			<view class="charts-box xb-card">
				<view class="charts-t">
					历史负荷数据
				</view>
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" :canvas2d="true" canvasId="sadasdiajsi"/>
			</view>
		</view>

    <view style="font-size: 28rpx;color: #333333;font-weight: 600;padding: 20rpx;margin-bottom: 20rpx;" @click="showCal=true">
      <text>{{checkTime}} </text>
      <u-icon name="arrow-down" style="margin: 0 12upx 0;padding: 0;"></u-icon>
    </view>

		<view class="xb-info" style="border-radius: 0;">
      <view>
        <text>监测时间</text>
        <text>负荷</text>
      </view>
			<view v-for="(item,index) in dataList" :key="index" @click="navTo('/pagesEnergy/transformer/tranHistoryDay?id='+transId+'&checkTime='+item.checkTime)">
				<text>{{item.checkTime}}</text>
				<text>{{item.value}}</text>
			</view>
		</view>

		<u-picker mode="time" v-model="showCal" :params="params" @confirm="pickerChange"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkTime:'2021-03',
				transId:'',
				dataList: [],
				params :{
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					// 选择时间的时间戳
					timestamp: false,
				},
				showCal:false,
				showCharts: false,
				chartData: {
					"categories": [],
					"series": [{
						"name": "负荷",
						"data": []
					}]
				},
				"opts": {
					"type": "line",
					"canvasId": "sadasdiajsihdnjkbcskjb",
					"canvas2d": true,
					"background": "none",
					"animation": false,
					"color": [
						"#08A113"
					],
					"padding": [
						10,
						0,
						10,
						0
					],
					"rotate": false,
					"errorReload": true,
					"fontSize": 12,
					"fontColor": "#666666",
					"enableScroll": true,
					"touchMoveLimit": 60,
					"enableMarkLine": true,
					"dataLabel": true,
					"dataPointShape": true,
					"dataPointShapeType": "solid",
					"tapLegend": true,
					"xAxis": {
						"disabled": true,
						"axisLine": true,
						"axisLineColor": "#999999",
						"calibration": false,
						"fontColor": "#999999",
						"fontSize": 12,
						"rotateLabel": false,
						"itemCount": 4,
						"boundaryGap": "center",
						"disableGrid": true,
						"xAxisHeight": 30,
						"gridColor": "#CCCCCC",
						"gridType": "solid",
						"dashLength": 4,
						"gridEval": 1,
						"scrollShow": false,
						"scrollAlign": "left",
						"scrollColor": "#A6A6A6",
						"scrollBackgroundColor": "#999",
						"format": ""
					},
					"yAxis": {
						"disabled": false,
						"disableGrid": true,
						"splitNumber": 5,
						"gridType": "dash",
						"dashLength": 2,
						"gridColor": "#999999",
						"padding": 10,
						"showTitle": false,
						"data": [{
							min: 0,
							max: 1000,
							titleOffsetX: '-50',
							unit: '  '
						}]
					},
					"legend": {
						"show": false,
						"position": "top",
						"float": "center",
						"padding": 5,
						"margin": 5,
						"backgroundColor": "rgba(0,0,0,0)",
						"borderColor": "rgba(0,0,0,0)",
						"borderWidth": 0,
						"fontSize": 12,
						"fontColor": "#999",
						"lineHeight": 11,
						"hiddenColor": "#999",
						"itemGap": 10
					},
					"extra": {
						"line": {
							"type": "curve",
							"width": 4
						},
						"tooltip": {
							"showBox": true,
							"showArrow": false,
							"showCategory": false,
							"borderWidth": 0,
							"borderRadius": 0,
							"borderColor": "#999",
							"borderOpacity": 0.1,
							"bgColor": "#999",
							"bgOpacity": 0.1,
							"gridType": "solid",
							"dashLength": 4,
							"gridColor": "#eee",
							"fontColor": "#333",
							"splitLine": true,
							"horizentalLine": false,
							"xAxisLabel": true,
							"yAxisLabel": true,
							"labelBgColor": "#FFFFFF",
							"labelBgOpacity": 1,
							"labelFontColor": "#666666"
						},
						"markLine": {
							"type": "solid",
							"dashLength": 4,
							"data": []
						}
					}
				}

			}
		},
		onLoad(e) {
			this.transId=e.id
			this.checkTime=this.$u.timeFormat(Date.parse(new Date()), 'yyyy-mm')
			this.getData()
		},
		methods: {
			getData() {
        this.chartData.series=[]
				this.apis.energyApi.nyTransMonth({
          transId:this.transId,
					checkTime:this.checkTime
				}).then(res => {
					this.dataList = res.rows
					let max = 0
          let list=[]
					this.dataList.forEach(item => {
						//this.chartData.categories.push(item.checkTime)
						max = Math.max(max, item.value)
            list.push(item.value)
						//this.chartData.series[0].data.push(item.value)
					})
          let series=[
            {
              name:'负荷',
              data:list
            }
          ]
          this.chartData=JSON.parse(JSON.stringify({categories:[],series}))
					this.opts.yAxis.data[0].max = Math.ceil(max / 100) * 100
					this.showCharts = true
				})
			},
			pickerChange(e){
				this.checkTime=`${e.year}-${e.month}`
        this.getData()
			}
		}
	}
</script>

<style lang="scss">
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		width: 100%;
		background-color: #fff;

		.charts-t {
			margin-bottom: 40upx;
			font-size: 28upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #333333;
		}
	}

	.histit {
		margin-bottom: 20upx;
		width: 100%;
		height: 50upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		@include flexCenter;
		background: #FFFFFF;
	}

</style>
